<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%@ include file="/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8"/>
    <title>普惠后端管理主页</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'/>
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet" type="text/css">

    <style>
        #treeview_menu_iframe{
            margin: 0;
            padding: 0;
            width:100%;
            min-height: 580px;
            overflow-x : hidden;
        }
        iframe {
            border-width: 0;
        }

        html,
        body {
            font-size: 100%;
        }

        body {
            background: white;
            color: #222222;
            padding: 0;
            margin: 0;
            font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            font-weight: normal;
            font-style: normal;
            line-height: 1;
            position: relative;
            cursor: default;
        }

        a:hover {
            cursor: pointer;
        }

        img,
        object,
        embed {
            max-width: 100%;
            height: auto;
        }

        object,
        embed {
            height: 100%;
        }

        img {
            -ms-interpolation-mode: bicubic;
        }

        /* Typography resets */
        div,
        dl,
        dt,
        dd,
        ul,
        ol,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        form,
        p,
        blockquote,
        th,
        td {
            margin: 0;
            padding: 0;
            direction: ltr;
        }

        /* Default Link Styles */
        a {
            color: #008cba;
            text-decoration: none;
            line-height: inherit;
        }

        a:hover, a:focus {
            color: #0079a1;
        }

        em,
        i {
            font-style: italic;
            line-height: inherit;
        }

        strong,
        b {
            font-weight: bold;
            line-height: inherit;
        }

        small {
            font-size: 60%;
            line-height: inherit;
        }

        ul,
        ol,
        dl {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            list-style-position: outside;
            font-family: inherit;
        }

        ul {
            margin-left: 1.1rem;
        }

        ul.no-bullet {
            margin-left: 0;
        }

        ul.no-bullet li ul,
        ul.no-bullet li ol {
            margin-left: 1.25rem;
            margin-bottom: 0;
            list-style: none;
        }

        /* Unordered Lists */
        ul li ul,
        ul li ol {
            margin-left: 1.25rem;
            margin-bottom: 0;
            font-size: 1rem;
            /* Override nested font-size change */
        }

        ul.square li ul, ul.circle li ul, ul.disc li ul {
            list-style: inherit;
        }

        ul.square {
            list-style-type: square;
            margin-left: 1.1rem;
        }

        ul.circle {
            list-style-type: circle;
            margin-left: 1.1rem;
        }

        ul.disc {
            list-style-type: disc;
            margin-left: 1.1rem;
        }

        ul.no-bullet {
            list-style: none;
        }

        /* Ordered Lists */
        ol {
            margin-left: 1.4rem;
        }

        ol li ul,
        ol li ol {
            margin-left: 1.25rem;
            margin-bottom: 0;
        }

        /* Definition Lists */
        dl dt {
            margin-bottom: 0.3rem;
            font-weight: bold;
        }

        dl dd {
            margin-bottom: 0.75rem;
        }

        ul.mtree {
            opacity: 0;
            margin-left: 0;
            padding: 1.2em;
        }

        ul.mtree ul {
            margin-left: 1em;
        }

        ul.mtree li {
            list-style: none;
        }

        ul.mtree a {
            display: block;
        }

        ul.mtree li.mtree-node > a {
            font-weight: bold;
        }

        ul.mtree a {
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
        }

        ul.mtree.transit {
            background: #222d32;
        }

        ul.mtree.transit ul {
            margin-left: 0;
        }

        ul.mtree.transit ul > li {
            font-size: .9em;
        }

        ul.mtree.transit li.mtree-node {
            position: relative;
        }

        ul.mtree.transit li.mtree-node > a:before {
            color: #CCC;
            font-weight: normal;
            position: absolute;
            right: 20px;
        }

        ul.mtree.transit li.mtree-open > a:before {
            margin-top: -1px;
            content: "ⅴ";
            font-weight: bold;
            font-size: 15px;
        }

        ul.mtree.transit li.mtree-closed > a:before {
            content: ">"
        }

        ul.mtree.transit ul > li:first-child {
            margin-top: 1px;
        }

        ul.mtree.transit li.mtree-open > a {
            background: rgb(30, 40, 44);
        }

        ul.mtree.transit li > a:hover, ul.mtree.transit li.mtree-active > a {
            background: #1e282c;
            color: #FFF;
        }

        ul.mtree.transit li.mtree-node > ul > li:last-child {
            margin-bottom: .5em;
            padding-bottom: .5em;
            border-bottom: 1px solid #333;
        }

        ul.mtree.transit li.mtree-node:last-child > ul > li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        ul.mtree.transit a {
            padding: 5px 0px 5px 0.8em;
            color: #CCC;
        }

        ul.mtree.transit li li > a {
            padding-left: 1.6em;
        }

        ul.mtree.transit li li li > a {
            padding-left: 2.4em;
        }

        ul.mtree.transit li li li li > a {
            padding-left: 3.2em;
        }

        ul.mtree.transit li li li li li > a {
            padding-left: 4em;
        }

        .mtree-skin-selector {
            text-align: center;
            background: #EEE;
            padding: 10px 0 15px;
        }

        .mtree-skin-selector li {
            display: inline-block;
            float: none;
        }

        .mtree-skin-selector button {
            padding: 5px 10px;
            margin-bottom: 1px;
            background: #BBB;
        }

        .mtree-skin-selector button:hover {
            background: #999;
        }

        .mtree-skin-selector button.active {
            background: #999;
            font-weight: bold;
        }

        .mtree-skin-selector button.csl.active {
            background: #FFC000;
        }


    </style>
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="/index.html" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>PH</b></span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>普惠电商后台管理系统</b></span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="${ctx}/static/dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
                            <span class="hidden-xs">${userName}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="${ctx}/static/dist/img/user2-160x160.jpg" class="img-circle"
                                     alt="User Image"/>
                                <p>
                                 	${userName}
                                    <small>${roleName}</small>
                                </p>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                      				<a href="#" onclick="showUpdatePsw();" class="btn btn-default btn-flat">修改密码</a>
                                </div>
                                <div class="pull-right">
                  				   	<a href="${ctx}/logout" class="btn btn-default btn-flat">注销</a>
                   				</div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="${ctx}/static/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
                </div>
                <div class="pull-left info">
                    <p>${userName}</p>

                    <a href="#">${roleName}</a>
                </div>
            </div>
            <!-- search form -->
            <!--     <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search${ctx}/static."/>
                    <span class="input-group-btn">
                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i
                        class="fa fa-search"></i></button>
              </span>
                </div>
            </form> -->
            <!--资源菜单-->
            <div class="htmleaf-container">
                <div class="htmleaf-content bgcolor-3">
                    <ul class="mtree bubba" id="menu"></ul>
                </div>
            </div>
        </section>
    </aside>

    <div class="content-wrapper" >
        <section class="content-header" id="breadcrumb">
            <ol class="breadcrumb">
                <li>
                    <i class="fa fa-dashboard"></i><a href="javascript:void(0)">首页</a>
                </li>
            </ol>

        </section>
        <section class="content">
            <iframe id="treeview_menu_iframe" src="">
            </iframe>
        </section>

    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.0
        </div>
        <strong>Copyright &copy; 2017-2017 重庆普惠联盟商贸有限公司.</strong> All rights
        reserved.
    </footer>
</div>
<div style="display: none">
    <div id="tree-node">
        <li data-menu-id="{id}">
            <a data-href="{menuUrl}" href="javascript:void(0)"><span>{menuName}</span></a>
        </li>
    </div>
    <div id="tree-node-ul">
        <li data-menu-id="{id}">
            <a data-href="{menuUrl}" href="javascript:void(0)"><span>{menuName}</span></a>
            <ul>
                {li}
            </ul>
        </li>
    </div>
</div>

<!-- 分配角色模态框 -->
<div class="modal fade" id="updatePswModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="updatePswForm" action="" method="post">
                    <br>
                    <br>
                    <div class="form-group">
                        <label for="password" class="col-sm-4 control-label"><span style="color:red;">*</span>原&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码:</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control " id="password" name="password" placeholder="请输入原密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="newPassword" class="col-sm-4 control-label"><span style="color:red;">*</span>新&nbsp;&nbsp;&nbsp;密&nbsp;&nbsp;&nbsp;码:</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control " id="newPassword" name="newPassword" placeholder="请输入新密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword" class="col-sm-4 control-label"><span style="color:red;">*</span>重复新密码:</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control " id="confirmPassword" name="confirmPassword" placeholder="请重复输入新密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-5">
                        </div>
                        <div class="col-sm-6">
                            <button type="button" id="addBtn" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!--[if lt IE 9]>
<script src="${ctx}/static/dist/js/html5shiv.min.js"></script>
<![endif]-->
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${ctx}/static/js/index.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/common.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/layer/layer.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/dist/js/app.min.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script type="text/javascript">
$("#treeview_menu_iframe").contents().find("body").html("<div style='text-align:center;margin-top:150px;'><b><font size='6'>欢迎使用普惠电商系统</font></b></div>")
</script>
<script>
    //指定点击某个菜单
    function menuSpecifyClick(id) {
        if (isNotNull(id)) {
        	var clickLi = $("li[data-menu-id=" + id + "]");
            $(clickLi.find("a:first")).click();
        }
    }

	//展示修改密码框
	function showUpdatePsw(){
		$("#updatePswModal").modal({show:true});
	}
    var passIndex,
        newPassIndex,
        newPassIndex2;
	function validate() {
	    var oldPass = $('#password').val().trim();
        if (!oldPass || oldPass.length < 6) {
            //tips层-右
            passIndex = layer.tips('* 此处不可空白 <br> * 最少 6 个字符', '#password',{time:0,tips:[2,'#ee0101']});
            return false;
        } else {
            layer.close(passIndex);
        }
        var newPassword = $('#newPassword').val().trim();
        if (!newPassword || newPassword.length < 6) {
            //tips层-右
            newPassIndex = layer.tips('* 此处不可空白 <br> * 最少 6 个字符', '#newPassword',{time:0,tips:[2,'#ee0101']});
            return false;
        } else {
            layer.close(newPassIndex);
        }
        var confirmPassword = $('#confirmPassword').val().trim();
        if (!confirmPassword || confirmPassword.length < 6) {
            //tips层-右
            newPassIndex2 = layer.tips('* 此处不可空白 <br> * 最少 6 个字符', '#confirmPassword',{time:0,tips:[2,'#ee0101']});
            return false;
        } else {
            layer.close(newPassIndex2);
        }
        if (confirmPassword != newPassword) {
            //tips层-右
            newPassIndex2 = layer.tips('* 两次输入的密码不匹配', '#confirmPassword',{time:0,tips:[2,'#ee0101']});
            return false;
        } else {
            layer.close(newPassIndex2);
        }
        return true;
    }

    var $menu = $("#menu");

    //初始化加载
    $(function () {
        $("#addBtn").click(function () {
            var flag = validate();
            if (flag) {
                $.ajax({
                    async: false,
                    url: "${ctx}/api/user/updatePsw",
                    data: $('#updatePswForm').serialize(),
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.code == '200') {
                            window.location.href = '${ctx}/logout';
                        }else{
                            $('#password').val('');
                            $('#newPassword').val('');
                            $('#confirmPassword').val('');
                            alert(data.message);
                        }
                    },
                    error:function(data){
                        alert("修改密码错误");
                    }
                });
            } else {
                return false;
            }
        });

        var userId = '${userId}';
        $.ajax({
            async: false,

            url: "/api/menu/list",
            data: {userId: userId},
            type: "GET",
            dataType: "json",
            success: function (data) {
                if (data.data != "") {
                    treeInit(data.data);
                }else{
                	alert("当前用户无菜单权限");
                }
            },
            error:function(data){
                alert("菜单加载异常");
            }
        });

        //菜单点击iframe改变事件
        $("a[data-href]").on("click", function () {
            var $this = $(this);
            var data_href = $this.attr("data-href");

            if (isNotNull(data_href)) {
                $("#treeview_menu_iframe").prop("src", data_href);
            }
        });

        //菜单折叠事件
        $menu.on("click", "li", function () {
            var openSiblings = $(this).siblings(".mtree-open");
            openSiblings.each(function () {
                    $(this).closeNode();
                }
            );
            //面包屑事件
            var openChildren = $menu.find(".mtree-open");
            var breadcrumbArr = [];
            openChildren.each(function () {
                var $this = $(this);
                if (!$this.hasClass("mtree-active")) {
                    breadcrumbArr.push($this.find("span:first").html());
                }
            });
            var activeHtml = $menu.find(".mtree-active").find("span:first").html();
            if (isNotNull(activeHtml)) {
                breadcrumbArr.push($menu.find(".mtree-active").find("span:first").html());
            }
            //生成面包屑
            var breadcrumbLength = breadcrumbArr.length;
            var breadcrumb = '<ol class="breadcrumb">';
            if (breadcrumbLength == 0) {
                breadcrumb += '<li><i class="fa fa-dashboard"></i><a href="javascript:void(0)">首页</a></li>';
            } else if (breadcrumbLength == 1) {
                breadcrumb += '<li><i class="fa fa-dashboard"></i> <a href="javascript:void(0)">' + breadcrumbArr[0] + '</a></li>';
            }else{
                $(breadcrumbArr).each(function (i) {
                    i == (breadcrumbLength - 1) ? breadcrumb += '<li class="active"> ' + breadcrumbArr[i] + '</li>' :
                        breadcrumb += '<li><i class="fa fa-dashboard"></i>' +
                            '<a href="javascript:void(0)">' + breadcrumbArr[i] + '</a></li>';
                })
            }
            breadcrumb += '</ol>';
            $("#breadcrumb").html(breadcrumb);
            return false;
        });

        $("#loginForm").validationEngine({
            promptPosition: "topRight",
            validationEventTriggers: "keyup blur",
            success: false,
            failure: function () {
                callFailFunction()
            }
        });
        //iframe高度适应父级页面
        changeFrameHeight();

        window.onresize = function () {
            changeFrameHeight();
        }
    });

    function changeFrameHeight() {
        var ifm = document.getElementById("treeview_menu_iframe");
        ifm.height = document.documentElement.clientHeight;
    }

</script>
</body>
</html>